import ButtonImage from '@/assets/button-3.png'
import logo from '@/assets/logo.png'

import { Close } from '@react-vant/icons'

import classNames from 'classnames'
import { useState } from 'react'
import { Overlay } from 'react-vant'
import styles from './index.module.less'
import usePoster from './usePoster'

export default function useAddressFillted() {
  const [visible, setVisible] = useState<boolean>(false)
  const { renderNode: renderPosterNode, open: openPoster } = usePoster()

  function renderNode() {
    return (
      <>
        <Overlay
          zIndex={9999}
          onClick={() => setVisible(false)}
          visible={visible}
          className="flex flex-col justify-center items-center"
        >
          <div className="w-[640px] bg-gradient-to-t from-[#6991c7] to-[#a3bded] border-white border py-12 px-4 text-base relative rounded-2xl">
            <Close
              onClick={() => setVisible(false)}
              className="absolute top-2 right-2 text-3xl text-white active:scale-95"
            />

            <i
              className={classNames(styles.kang, 'absolute  -left-4 -bottom-4')}
            >
            </i>

            <img
              src={logo}
              className="block mx-auto mb-6 h-12"
              alt=""
            />

            <h1 className=" text-3xl text-[#2a4169] text-center font-bold">
              您已成功提交信息
            </h1>
            <p className="py-12 text-center text-white">
              康康会在活动结束后
              <br />
              30个工作日内，
              <br />
              为您派送康泰克先生
              <br />
              变天守护好礼
            </p>

            <button
              type="button"
              onClick={() => {
                openPoster()
              }}
              className=" w-[439px] h-[119px] bg-no-repeat bg-center block mx-auto  bg-cover with-ani-scales"
              style={{
                backgroundImage: `url(${ButtonImage})`,
              }}
            />
          </div>
        </Overlay>

        {renderPosterNode()}
      </>
    )
  }

  return {
    open() {
      setVisible(true)
    },
    renderNode,
  }
}
